<script type="text/javascript">
	$(function(){
		var chartDataUrl = "../cockpitPartThree/tradeChartdata";
		var chartDiv1 = "chartDiv1";
		var chartDiv2 = "chartDiv2";
		var chartDiv3 = "chartDiv3";
		$.get(chartDataUrl,function(ret){
			var data = JSON.parse(ret);
			
			//炼焦煤占比
			var chartData1 = [
	            {value:data['impDetail']['炼焦煤'], name:'炼焦煤进口量'},
	            {value:data['expDetail']['炼焦煤'], name:'炼焦煤出口量'}
	        ];
			
			//褐煤占比
			var chartData2 = [
	            {value:data['impDetail']['褐煤'], name:'褐煤进口量'},
	            {value:data['expDetail']['褐煤'], name:'褐煤出口量'}
	        ];
			
			//无烟煤占比
			var chartData3 = [
	            {value:data['impDetail']['无烟煤'], name:'无烟煤进口量'},
	            {value:data['expDetail']['无烟煤'], name:'无烟煤出口量'}
	        ];

			loadTradeElseData(data);
			
			var css1 = {
				normal:{
					show:true,
					formatter:'{d}%',
				}
				
			}
			chartData1[0].label = css1;
			chartData2[0].label = css1;
			chartData3[0].label = css1;
			loadTradeChart(chartDiv1,chartData1);
			loadTradeChart(chartDiv2,chartData2);
			loadTradeChart(chartDiv3,chartData3);
		})
		
	})
	
	function loadTradeElseData(data){
		//console.log(data);
		var needTextDom = $(".box_r>.box07 p")
			.add(".box_r>.box08 td:contains('进口量')~td")
			.add(".box_r>.box08 td:contains('出口量')~td");
		var texts = [
				data['impSum'],//总进口量
				data['expSum'],//总出口量
				data['impDetail']['炼焦煤'],
				data['impDetail']['褐煤'],
				data['impDetail']['无烟煤'],
				data['impDetail']['其他'],
				data['expDetail']['炼焦煤'],
				data['expDetail']['褐煤'],
				data['expDetail']['无烟煤'],
				data['expDetail']['其他']
			];
		$.each(needTextDom,function(i,n){
			$(n).text(Math.round(texts[i]/100)/100);
		})
		
	}
	function loadTradeChart(idOfDom,chartData) {
		// 基于准备好的dom，初始化echarts实例
		var option = {
				tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)",
			    },
			    series: [
			        {
			            hoverAnimation:false,
			            name:'占比',
			            type:'pie',
			            avoidLabelOverlap: false,
			            radius: ['60%', '70%'],
			            color:["#043DA9","#06EECA"],
			            avoidLabelOverlap: false,
			            data:chartData,
			            label:{
			            	normal: {
			                    show: false,
			                    position: 'center',
		                    	formatter:'{d}%',
			                    textStyle: {
				                	color:'#fff',
			                        fontSize: '15',
			                        //fontWeight: 'bold'
			                    }
			                },
			                emphasis: {
		                    	formatter:'{d}%',
			                    show: false,
			                    textStyle: {
				                	color:'#fff',
			                        fontSize: '15',
			                        //fontWeight: 'bold'
			                    }
			                }
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			        }
			    ]
			};
		new echartsPersonal(idOfDom).loadChart(option);
	}
</script>
	
	<!-- 
	<div comment="进出口总量">
		<span>全国煤炭出口量（年）</span>400000
		<span>全国煤炭进口量（年）</span>500000
	</div>
	<div comment="进出口明细">
		<table border="1">
			<tr>
				<td></td>
				<td>煤炭</td>
				<td>炼焦煤</td>
				<td>褐煤</td>
				<td>其他</td>
			</tr>
			<tr>
				<td>出口量</td>
				<td>1000000</td>
				<td>1000000</td>
				<td>1000000</td>
				<td></td>
			</tr>
			<tr>
				<td>进口量</td>
				<td>1000000</td>
				<td>1000000</td>
				<td>1000000</td>
				<td></td>
			</tr>
		</table>
	</div>
	<div comment="图表">
		<h2>占比</h2>
		<div id="chartDiv" style="width: 900px;height:300px;">
			<div id="chartDiv1" style="width: 300px;height:300px;float:left">
			
			</div>
			<div id="chartDiv2" style="width: 300px;height:300px;float:left">
			
			</div>
			<div id="chartDiv3" style="width: 300px;height:300px;float:left">
			
			</div>
		
		</div>
	</div>
	 -->
